<!doctype html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" type="text/css" href="signin_index.css">
</head>
<body>
  <div id='signin-info'>
    <div class="section" jsselect="signin_info">
      <h2 jscontent="title"></h2>
      <table class="signin-details">
        <tr jsselect="data"
            jsvalues="class:setClassFromValue($this.value)"
            jseval="highlightIfChanged(this,
                      this.children[1].innerText, value)">
          <td jscontent="label"></td>
          <td jscontent="status"></td>
          <td jscontent="time" jsdisplay="time"></td>
          <td jsdisplay="time.length==0">&nbsp;</td>
        </tr>
      </table>
    </div>
  </div>
  <div id='token-info'>
    <h2>Access Token Details By Account</h2>
    <div class="tokenSection" jsselect="token_info">
      <h3 jscontent="title"></h3>
      <table class="signin-details">
        <tr class="header">
          <td>Service</td>
          <td>Requested Scopes</td>
          <td>Request Time</td>
          <td>Request Status</td>
        </tr>
        <tr jsselect="data"
            jsvalues="class:setClassFromValue($this.status)"
            jseval="highlightIfAnyChanged(this,
                      [[this.children[1].innerText, scopes],
                      [this.children[2].innerText, request_time],
                      [this.children[3].innerText, status]])">
          <td jscontent="service"></td>
          <td jsvalues=".textContent: scopes"></td>
          <td jscontent="request_time"></td>
          <td jsvalues=".textContent: status"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id='cookie-info'>
    <h2>Accounts in Cookie Jar</h2>
    <div class="cookieSection">
      <table class="signin-details">
        <tr class="header">
          <td>Email Address</td>
          <td>Gaia ID</td>
          <td>Validity</td>
        </tr>
        <tr jsselect="cookie_info">
          <td jscontent="email"></td>
          <td jscontent="gaia_id"></td>
          <td jscontent="valid"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="account-info">
    <h2>Accounts in Token Service</h2>
    <div class="account-section">
      <table class="signin-details">
        <tr class="header">
          <td>Account Id</td>
          <td>Has refresh token</td>
          <td>Has persistent auth error</td>
        </tr>
        <tr jsselect="accountInfo">
          <td jscontent="accountId"></td>
          <td jscontent="hasRefreshToken"></td>
          <td jscontent="hasAuthError"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="refresh-token-events">
    <h2>Refresh token events</h2>
    <div class="refresh-token-events-section">
      <table class="signin-details">
        <tr class="header">
          <td>Timestamp</td>
          <td>Accound Id</td>
          <td>Event type</td>
          <td>Source</td>
        </tr>
        <tr jsselect="refreshTokenEvents">
          <td jscontent="timestamp"></td>
          <td jscontent="accountId"></td>
          <td jscontent="type"></td>
          <td jscontent="source"></td>
        </tr>
      </table>
    </div>
  </div>

  <script type="module" src="signin_internals.js"></script>
</body>
</html>
